<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>

1、找到标签
    a、直接查找
        <!--获取单个元素，根据ID获取一个标签-->
        document.getElementById('id_name')
        <!--根据标签名获取标签集合，获取多个元素（返回列表）-->
        document.getElementsByTagName('div')
        <!--根据class属性获取标签集合-->
        document.getElementsByClassName('class_name')
        <!--根据name属性获取标签集合-->
        document.getElementsByName

    b、间接查找
        parentNode          // 父节点
        childNodes          // 所有子节点
        firstChild          // 第一个子节点
        lastChild           // 最后一个子节点
        nextSibling         // 下一个兄弟节点
        previousSibling     // 上一个兄弟节点

        parentElement           // 父节点标签元素
        children                // 所有子标签
        firstElementChild       // 第一个子标签元素
        lastElementChild        // 最后一个子标签元素
        nextElementtSibling     // 下一个兄弟标签元素
        previousElementSibling  // 上一个兄弟标签元素

2、操作标签
var obj = document.getElementById('i1')
    **文件内容操作
        a、innerText
            <!--获取标签中的文本内容,会自动过滤掉其中的HTML标签-->
            obj.innerText
            <!--对标签的内容重新赋值-->
            obj.innerText = 新内容
        b、innerHTML
            <!--获取标签中的文本内容,会包含其中的HTML标签，原样输出-->
            obj.innerHTML
            <!--会解析HTML标签-->
            obj.innerHTML = '<a href="#">百度</a>'
        c、value
            <!--可获取input,textarea标签的输入值-->
            obj.value
            <!--可获取select选中的value值-->
            selectobj.value
            selectobj.selectIndex
            <!--重新赋值-->
            obj.value = 'tom'
        d、checked属性
            <!--checkbox标签应用-->
            返回true或false
    **样式操作
        a、className
            tag.className                // 获取所有类名
            tag.className = '重新赋值'
        b、classList
            tag.classList.remove('c1')    // 删除指定类，即删除样式
            tag.classList.add('c2')       // 添加类，即添加样式
        c、style -- 对某个样式进行操作（对有横杠的样式，去掉横杠，第二个单词首字母大写）
            obj.style.fontSize
            obj.color
            obj.backgroundColor
    **属性操作
        a、attributes                // 获取所有标签属性
            obj.attributes
        b、setAttribute(key,value)   // 设置标签属性
        c、getAttribute(key)         // 获取指定标签属性
        d、removeAttribute(key)      //删除指定的属性
    **创建标签，并添加到HTML中：
        方式一:对象方式
            var tag = document.createElement('a')  //创建a标签
            //可添加属性
            tag.innerText = "wupeiqi"
            tag.className = "c1"
            tag.href = "http://www.cnblogs.com/wupeiqi"
            obj.appendChild(tag)
            obj.insertBefore(tag,obj[1])
        方式二:字符串形式
            //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            var tag = "<input type='text' />";  //创建input标签
            //可添加样式
            tag.style.fontSize = "32px";
            tag.style.backgroundColor = "red";
            obj.insertAdjacentHTML("beforeEnd",tag);
            obj.insertAdjacentElement('afterBegin',tag);

    提交表单
        任何标签通过DOM都可以提交表单
        documnet.getElementById('f1').submit()
    其他操作
        console.log                 输出框
        alert                       弹出框
        confirm                     确认框  // var v = confirm('是否要删除');  v=true/false

        // URL和刷新
        location.href               获取当前URL
        location.href = "url"       重定向，跳转
        location.reload()           重新加载

        // 定时器
        setInterval                 多次定时器，定时器一直在执行   // var obj = setInterval('func();',5000);
        clearInterval               清除多次定时器  // crearInterval(obj);

        setTimeout                  单次定时器,定时器只执行一次  // var obj = setTimeout('func();',5000);  应用：延迟清除提示信息
        clearTimeout                清除单次定时器         //clearTimeout(obj)
3、事件
    onclick
    onfocus   元素获得标签
    onblur    元素失去标签
    onmousemove
    onmouseout
    绑定事件的三种方式：
        a.直接标签绑定
        b.放在js中，先获取DOM对象，然后进行绑定
            document.getElementById('i1').onclick = function(){};
        c.多次绑定同一个事件在对象上
            //false冒泡模型，从里到外显示
            //true抓取模型，从外到里显示
            obj.addEventListener('click',function(){console.log("aaa")},false)
            obj.addEventListener('click',function(){console.log("bbb")},false)

    this,当前触发事件的标签
        a.第一种绑定方式中使用this
            <input id="i1" type="button" onclick="clickOn(this);">
            function() clickOn(ths){
                // ths 当前点击的标签
            }
        b.第二种绑定方式中使用this
            <input type="button" id="i2">
            document.getElementById('i2').onlick = function(){

                //this 代指当前点击的标签
            }

</body>
</html>